@import 'common';

.lv1-bg {
  background-color: #50c87e;
}
.lv2-bg {
  background-color: #005EAC;
}
.lv3-bg{
  background-color: #FFD000;
}
.lv4-bg {
  background-color: #FF8C00;
}
.lv5-bg {
  background-color: #F012BE;
}
.lv6-bg {
  background-color: red;
}
.lv7-bg {
  background-color: red;
}
.userspace-container {
	width: 1000px;
	margin: auto;
	position: relative;
	margin-top: 80px;
	.top-banner {
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-color: map-get($defaultColor, c1);
	}
	.left-body {
		width: 200px;
		position: absolute;
		left: 0;
		margin-top: 0;
		p {
			text-align: center;
		}
		.user-info {
			padding: 20px 0;
		}
		.user-avatar {
			text-align: center;
			height: 100px;
			img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: 4px solid #fff;
				box-shadow:0 0 0 4px map-get($defaultColor, baseColor);
				&:hover {
					box-shadow: 0 0 0 4px map-get($activeColor, baseColor);
				}
			}
		}
		.name {
			margin-top: 10px;
			font-size: 20px;
			color: map-get($activeColor, aColor);
			padding: 0 10px;
			text-align: center;
			.nickname {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.sex-1 {
				color: map-get($defaultColor, c7);
			}
		}
		.lv {
			margin: 4px;
			letter-spacing: 2px;
			color: map-get($defaultColor, c3);
			text-align: center;
			font-size: 15px;
			.expr {
				display: inline-block;
				width: 100px;
				position: relative;
				text-align: left;
				&:hover .text {
					display: inline-block;
				}
				.top,
				.bottom {
					height: 10px;
					display: inline-block;
					position: absolute;
					left: 10px;
					top: 50%;
					margin-top: -5px;
					border-radius: 5px;
				}
				.text {
					position: absolute;
					letter-spacing: 0px;
					font-size: 12px;
					height: 10px;
					line-height: 10px;
					display: inline-block;
					top: 50%;
					left: 50%;
					transform: translate3d(-50%, -50%, 0);
					text-shadow: 1px 1px 0 #fff;
					display: none;
				}
				.bottom {
					width: 100%;
					background-color: map-get($defaultColor, c8);
				}
				.level {
					display: inline-block;
					width: 20px;
					height: 20px;
					color: #fff;
					margin-left: -5px;
					position: relative;
					border-radius: 50%;
					text-align: center;
					line-height: 20px;
				}
			}
		}
		.uid {
			margin: 4px;
			font-size: 15px;
			font-style: italic;
			color: map-get($defaultColor, c1);
		}
		.fans-container {
			display: flex;
			.attention {
				border-right: 1px solid map-get($defaultColor, c3);
			}
			.attention,
			.fans {
				flex: 1;
				p {
					font-size: 18px;
				}
				a:hover {
					color: map-get($activeColor, aColor);
				}
			}
		}
	}
	.tab-container {
		margin-bottom: 40px;	
	}
}
